window.onload = async () => {
    //调取数据
    try {
        const res = await axios({
            url: '/dashboard',
        })
        const { overview, salaryData, year, groupData, provinceData } = res.data
        // console.log(res.data)
        // console.log(salaryData);
        for (let k in overview) {
            document.querySelector(`[name="${k}"]`).innerHTML = overview[k]
        }

        // 薪资折线图

        function myQian(year) {
            const myChart = echarts.init(document.querySelector('#line'))
            // console.log(res);
            const option = {
                // 标题部分的设置
                title: {
                    text: '2022全学科薪资走势',
                    top: '2%',
                    left: '3%'
                },
                // 图表
                grid: {
                    // 设置上下左右的间隙
                    top: '15%',
                    left: '10%',
                    right: '10%',
                    bottom: '10%'
                },
                // x轴的设置
                xAxis: {
                    type: 'category',
                    data: year.map(item => item.month), // 箭头行数 一行代码 省略 {} return
                    // x轴线段设置
                    axisLine: {
                        // 线段的样式
                        lineStyle: {
                            // 类型 虚线
                            type: 'dashed',
                            // 颜色
                            color: '#d3d3d3'
                        }
                    },
                    // x轴文本设置
                    axisLabel: {
                        // 颜色
                        color: 'black'
                    }
                },
                // y轴的设置
                yAxis: {
                    type: 'value',
                    // 分割线
                    splitLine: {
                        // 线的样式
                        lineStyle: {
                            type: 'dashed', // 类型
                            // width:20, // 宽度
                            color: 'deepskyblue' // 颜色
                        }
                    }
                },
                color: ['#5f8eff'],
                // 提示框 设置了才会出现
                tooltip: {
                    show: true
                },
                series: [
                    {
                        data: year.map(item => item.salary),
                        type: 'line',
                        // 圆圈
                        smooth: true,
                        // 圆圈大小
                        symbolSize: 10,
                        // 线宽
                        lineStyle: {
                            width: 8
                        },
                        // 区域颜色
                        areaStyle: {
                            // 渐变
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#aed4ff' // 0% 处的颜色
                                    },
                                    {
                                        offset: 0.7,
                                        color: '#ffffff' // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option)
        }
        myQian(year)
        // 薪资饼图
        function myBing(salaryData) {
            const myChart = echarts.init(document.querySelector('#salary'))
            // console.log(res);
            const option = {
                title: {
                    text: '班级薪资分布',
                    top: '2%',
                    left: '3%'
                },
                tooltip: {
                    trigger: 'item'
                },
                // 图例
                legend: {
                    bottom: '5%',
                    left: 'center'
                },
                // 颜色
                color: ['#fda224', '#5097ff', '#3fceff', '#34d39a', 'yellowgreen'],
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['60%', '80%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: salaryData.map(item => {
                            return {
                                name: item.label,
                                value: item.g_count + item.b_count
                            }
                        }),
                    }
                ]
            };
            myChart.setOption(option)
        }
        myBing(salaryData)
        // 我的小组
        function myXiaozu(groupData) {
            const myChart = echarts.init(document.querySelector('#lines'))
            const option = {
                // x轴设置
                xAxis: {
                    type: 'category',
                    data: groupData[1].map(item => item.name),
                    // 线段设置
                    axisLine: {
                        // 线的样式
                        lineStyle: {
                            type: 'dashed',
                            color: '#d4d4d6'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    // 分割线设置
                    splitLine: {
                        // 线的样式
                        lineStyle: {
                            type: 'dashed',
                            color: '#d4d4d6'
                        }
                    }
                },
                // 颜色
                color: [
                    // 渐变
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#34d29a' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#d4f5ea' // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    },
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#499fed' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#d8eafb' // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    }
                ],
                series: [
                    // 柱状图 给多个图形,会有柱形
                    {
                        data: groupData[1].map(item => item.hope_salary),
                        type: 'bar'
                    },
                    {
                        data: groupData[1].map(item => item.salary),
                        type: 'bar'
                    }
                ]
            };
            myChart.setOption(option)
            // 点击按钮
            const btn = document.querySelectorAll('#btns .btn')
            btn.forEach(item => {
                item.onclick = function () {
                    const index = this.innerHTML.trim()
                    btn.forEach(item => {
                        item.classList.remove('btn-blue')
                    })
                    this.classList.add('btn-blue')
                    option.xAxis.data = groupData[index].map(item => item.name)
                    option.series[0].data = groupData[index].map(item => item.hope_salary)
                    option.series[1].data = groupData[index].map(item => item.salary)
                    myChart.setOption(option)
                }
            })
        }
        myXiaozu(groupData)

        // 男女薪资分布
        function myBingGenter(salaryData) {
            const myChart = echarts.init(document.querySelector('#gender'))
            // console.log(res);
            const option = {
                // title可以设置一个数组 给多个标题
                title: [
                    {
                        text: '男女薪资分布',
                        top: '3%',
                        left: '4%'
                    },
                    {
                        text: '男生',
                        left: 'center',
                        top: '45%'
                    },
                    {
                        text: '女生',
                        left: 'center',
                        top: '85%'
                    }
                ],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    show: false
                },
                color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a', 'yellowgreen'],
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['25%', '35%'],
                        // 圆心的位置
                        center: ['50%', '30%'],
                        data: salaryData.map(item => {
                            return {
                                name: item.label,
                                value: item.b_count
                            }
                        }),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['25%', '35%'],
                        center: ['50%', '70%'],
                        data: salaryData.map(item => {
                            return {
                                name: item.label,
                                value: item.g_count
                            }
                        }),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option)
        }
        myBingGenter(salaryData)

        // 省分布
        const initMapChart = (provinceData) => {
            const myEchart = echarts.init(document.querySelector('#map'))
            const dataList = [
                { name: '南海诸岛', value: 0 },
                { name: '北京', value: 0 },
                { name: '天津', value: 0 },
                { name: '上海', value: 0 },
                { name: '重庆', value: 0 },
                { name: '河北', value: 0 },
                { name: '河南', value: 0 },
                { name: '云南', value: 0 },
                { name: '辽宁', value: 0 },
                { name: '黑龙江', value: 0 },
                { name: '湖南', value: 0 },
                { name: '安徽', value: 0 },
                { name: '山东', value: 0 },
                { name: '新疆', value: 0 },
                { name: '江苏', value: 0 },
                { name: '浙江', value: 0 },
                { name: '江西', value: 0 },
                { name: '湖北', value: 0 },
                { name: '广西', value: 0 },
                { name: '甘肃', value: 0 },
                { name: '山西', value: 0 },
                { name: '内蒙古', value: 0 },
                { name: '陕西', value: 0 },
                { name: '吉林', value: 0 },
                { name: '福建', value: 0 },
                { name: '贵州', value: 0 },
                { name: '广东', value: 0 },
                { name: '青海', value: 0 },
                { name: '西藏', value: 0 },
                { name: '四川', value: 0 },
                { name: '宁夏', value: 0 },
                { name: '海南', value: 0 },
                { name: '台湾', value: 0 },
                { name: '香港', value: 0 },
                { name: '澳门', value: 0 },
            ]
            // 邹艳双循环
            provinceData.forEach(item => {
                dataList.forEach(item1 => {
                    if (item.name.indexOf(item1.name) != -1) {
                        item1.value = item.value
                    }
                })
            })
            let option = {
                title: {
                    text: '籍贯分布',
                    top: 10,
                    left: 10,
                    textStyle: {
                        fontSize: 16,
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} 位学员',
                    borderColor: 'transparent',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    textStyle: {
                        color: '#fff',
                    },
                },
                visualMap: {
                    min: 0,
                    max: 6,
                    left: 'left',
                    bottom: '20',
                    text: ['6', '0'],
                    inRange: {
                        color: ['#ffffff', '#0075F0'],
                    },
                    show: true,
                    left: 40,
                },
                geo: {
                    map: 'china',
                    roam: false,
                    zoom: 1.0,
                    label: {
                        normal: {
                            show: true,
                            fontSize: '10',
                            color: 'rgba(0,0,0,0.7)',
                        },
                    },
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(0, 0, 0, 0.2)',
                            color: '#e0ffff',
                        },
                        emphasis: {
                            areaColor: '#34D39A',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                        },
                    },
                },
                series: [
                    {
                        name: '籍贯分布',
                        type: 'map',
                        geoIndex: 0,
                        data: dataList,
                    },
                ],
            }
            myEchart.setOption(option)
        }
        initMapChart(provinceData)

    } catch (error) {
        console.dir(error);
    }

}